Buefy — Loading Indicator and Menu

Buefy is a UI framework that’s based on Bulma.

In this article, we’ll look at how to use Buefy in our Vue app.

Loading Indicator

We can add a loading indicator with the b-loading component:

<template>
  <div id="app">
    <b-loading is-full-page v-model="isLoading" :can-cancel="true"></b-loading>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isLoading: true
    };
  }
};
</script>

is-full-page sets the loading indicator to fill the page.

v-model binds to the isLoading state to let us control when it’s displayed.

can-cancel lets us close it with the Esc key with when it’s set to true .

We can open the loading indicator programmatically with the this.$buefy.loading.open method:

<template>
  <div id="app" ref="element">
    <button class="button is-primary is-medium" @click="open">load</button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    open() {
      const loadingComponent = this.$buefy.loading.open({
        container: this.$refs.element.$el
      });
      setTimeout(() => loadingComponent.close(), 3 * 1000);
    }
  }
};
</script>

We call the method with the container property.

It sets the container for displaying the loading indicator.

We can set it to null to make it fill the screen.

The close method closes the loading indicator.

Also, we can create our own loading indicator by populating the default slot:

<template>
  <div id="app" ref="element">
    <b-loading is-full-page v-model="isLoading" :can-cancel="true">
      <b-icon pack="fa" icon="circle-o-notch" size="is-large" custom-class="fa-spin"></b-icon>
    </b-loading>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    isLoading: true
  }
};
</script>

We set the loading indicator to an icon with the b-icon component.

fa-spin makes Font Awesome icons spin.

Menu

Buefy comes with a menu component.

For example, we can write:

<template>
  <div id="app" ref="element">
    <b-menu>
      <b-menu-list label="Menu">
        <b-menu-item icon="address-book" icon-pack="fa" label="Info"></b-menu-item>
        <b-menu-item icon="settings" :active="isActive" expanded>
          <template slot="label" slot-scope="props">
            Administrator
            {{props.expanded ? '&#x2193;' : '&#x2191;'}}
          </template>
          <b-menu-item label="Users"></b-menu-item>
          <b-menu-item>
            <template slot="label">Devices
              <b-dropdown class="is-pulled-right" position="is-bottom-left">
                <b-icon slot="trigger"></b-icon>
                <b-dropdown-item>action 1</b-dropdown-item>
                <b-dropdown-item>action 2</b-dropdown-item>
              </b-dropdown>
            </template>
          </b-menu-item>
          <b-menu-item label="Payments" disabled></b-menu-item>
        </b-menu-item>
        <b-menu-item label="My Account">
          <b-menu-item label="Account data"></b-menu-item>
          <b-menu-item label="Addresses"></b-menu-item>
        </b-menu-item>
      </b-menu-list>
      <b-menu-list>
        <b-menu-item label="Expo" tag="router-link" target="_blank" to="/expo"></b-menu-item>
      </b-menu-list>
      <b-menu-list label="Actions">
        <b-menu-item label="Logout"></b-menu-item>
      </b-menu-list>
    </b-menu>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return { isActive: true };
  }
};
</script>

We add the b-menu to add the menu.

b-menu-item has the menu items.

b-dropdown adds dropdowns.

b-menu-list is a menu list to separate the menu into sections.

Conclusion

We can add a loading indicator and menu easily with Buefy.